<template>
	<view>
		<view class="head">
			<uni-icons type="redo" size="17px" style="color: #FCFCFC; float: right;margin-right: 12px;"></uni-icons>
			<uni-nav-bar dark :fixed="true"
						shadow background-color="#1F8AF3" color="#FCFCFC"
						status-bar left-icon="left"
						right-icon="redo" title="商品详情"
						@clickLeft="back"
						/>
		</view>
		<view class="main">

				<!-- 商品轮播图 -->
				<swiper  class="swipers":indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in goodsList" :key="index">
						<view class="swiper-item">
							<image class="swiper-img" :src="item.imgUrl" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
				<view v-for="(item,index) in goodsList" :key="index">
				<!-- 商品价格 -->
				<view class="message">
					<text class="price">￥{{item.price}}</text>
					<text class="product-message">{{item.name}}</text>
					<text class="time">发布：{{item.uploadTime}}</text>
				</view>
				<view class="product-introduce">
					<text class="introduce">商品介绍</text>
					<hr class="line">
					<text class="introduce-tx">{{item.introduction}}</text>

				</view>
			</view>

			<!-- 悬浮球 -->
<!-- 			<view>
				<uni-fab
					:pattern="pattern"
					@fabClick="fabClick"
				></uni-fab>
			</view> -->
			<!-- 商品详情 -->
			<view>
				<view class="goods-introduce">
					<hr class="line">
					<text class="introduce">商品详情</text>
				</view>
				<view><img class="detals-img" src="../../static/lunwen01.png" alt=""></view>
				<view><img class="detals-img" src="../../static/lunwen01.png" alt=""></view>
			</view>
			<!-- 推荐 -->
			<view class="shop-tj">
				<text style="color: rgba(16, 16, 16, 1);
					font-size: 14px;
					text-align: left;"
					>推荐
				</text>
				<hr class="line">
				<view class="goods"
					v-for="(item,index) in dataList"
					:key="index"
				>
					<image :src="item.imgUrl" mode="aspectFit"></image>
					<view class="content">
						<text>{{item.name}}</text>
						<view class="content-message">
							<text class="price">￥{{item.price}}</text>
							<text class="ttime">{{item.ttime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-foot" v-for="(item,index) in goodsList" :key="index">
<!--		<view class="goods-foot">-->
			<view class="fav">
				<uni-icons :type="type" size="23px" :color="color" @click="fav(isCollecting)"></uni-icons>
				<text class="fav-txt">{{collectionText}}</text>
			</view>
			<button class="shop-btn" @click="buttonClick(item.id)">立即购买</button>
		</view>
	</view>
</template>

<script>
	import axios from 'axios'
	export default{
		onLoad(e) {
			this.id=e.id
			// console.log(this.id);
      //要在开始判断是否已经收藏
      let that = this
      //TODO 接口格式
      this.$axios.get('/collection/collection/judgeCollecting',{
        params: {
          goodsId: e.id
        },
        headers: {
          token: localStorage.getItem('token')
        }
      }).then(res=>{
        let code = res.data.code;
        that.isCollecting = (code === 200 || code === '200'); //如果显示200，则该商品已经被收藏
        console.log(that.isCollecting)

        if (this.isCollecting === true) {
          this.type = 'heart-filled';
          this.color = 'red';
          this.collectionText = '取消收藏';
        }else {
          this.type = 'heart';
          this.color = '#888889'
          this.collectionText = '收藏';
        }
      }).catch(res=> {
        that.isCollecting = false; //如果报错，默认商品没有被收藏

        this.type = 'heart';
        this.color = '#888889'
        this.collectionText = '收藏';
      })

		},
		created() {
				this.$axios.get("/goods/search",{
					params:{
						key:'',
					},
					headers:{
						'token':localStorage.getItem('token')
					}
				}).then(res=>{
					let key = this.id
					// console.log('key:'+key);
					res.data.data.map(item => {
					  if (item.fileType === 0)
									item.imgUrl = '../../static/pdficon.jpeg'
					  else if (item.fileType === 1 || item.fileType ===2)
									item.imgUrl = '../../static/docIcon.jpg'
					  else
									item.imgUrl = '../../static/pdficon.jpeg' //默认为pdf

					  //item.uploadTime = new Date()
            //TODO 暂时用这种方法，以后可能会改吧
					  item.uploadTime = item.uploadTime.slice(0,10)
					})
					for(var i = 0; i < res.data.data.length; i++){
						if(res.data.data[i].id == key){
							this.goodsList.push(res.data.data[i])
							// console.log(111);

						}
					}
					// console.log(this.goodsList);
					}).catch(()=>{
						uni.showToast({
							title:"请求失败",
							icon:"none"
						})
					})
		},
		data(){
			return{
				id:'',
				// swiperList:[
				// 	{imgUrl:"../../static/pdf.png"},
				// 	{imgUrl:"../../static/xq01.png"},
				// 	{imgUrl:"../../static/xq02.png"},
				// ],
				// pattern: {            //悬浮球
				// 	color: '#FDFEFE',
				// 	backgroundColor: '#7ECDAD',
				// 	selectedColor: '#7ECDAD',
				// 	buttonColor: '#44B65F',
				// 	icon: 'home-filled'
				// },
				dataList:[
					{
						imgUrl:"/static/pdf.png",
						name:"单反相机/套机   佳能（Canon）1500D  18-55II镜头 黑色",
						price:"25",
						ttime:"2019-12-25",
					},
					{
						imgUrl:"/static/pdf.png",
						name:"哈尔滨理工大学809-计算机网络专业课真题",
						price:"25",
						ttime:"2019-12-25",
					}
				],
				goodsList:[],
        isCollecting: false,
        collectionText: '收藏',
        color: '#888889',
        type: 'heart'
			}
		},
		methods:{
			back(){
				uni.switchTab ({
					url:'/pages/index/index',
				})
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'success'
				})

			},
			buttonClick(id) {
				// console.log(e)
				uni.navigateTo({
					url:'/pages/index/order?id='+id+'',
				})
			},
			fabClick(){
				uni.showToast({
					title:'点击了悬浮按钮,即将跳转回首页',
					icon:'none'
				})
				setTimeout(function(){
					uni.switchTab({
						url:'/pages/index/index',
					})
				},1000)
			},
			fav(isCollecting){
        console.log(isCollecting)
        if (isCollecting) {
          this.unFav();
          return;
        }
        let that = this
        this.$axios.get('/collection/collect',{
          params: {
            goodsId: that.id
          },
          headers: {
            token: localStorage.getItem('token')
          }
        }).then(res => {
          if (parseInt(res.data.code) === 200) {
            uni.showToast({
              title:'收藏成功',
              icon:'none'
            })
            this.type = 'heart-filled';
            this.color = 'red';
            this.collectionText = '取消收藏';
            this.isCollecting = true;
          }else {
            uni.showToast({
              title:'收藏失败',
              icon:'none'
            })
          }
        }).catch(err => {
          uni.showToast({
            title:'收藏失败',
            icon:'none'
          })
        })

			},
      unFav(){
        let that = this
        this.$axios.get('/collection/cancelCollecting',{
          params: {
            goodsId: that.id
          },
          headers: {
            token: localStorage.getItem('token')
          }
        }).then(res => {
          if (parseInt(res.data.code) === 200) {
            uni.showToast({
              title:'取消收藏成功',
              icon:'none'
            })
            this.type = 'heart';
            this.color = '#888889';
            this.collectionText = '收藏';
            this.isCollecting = false;
          }else {
            uni.showToast({
              title:'取消收藏失败',
              icon:'none'
            })
          }
        }).catch(err => {
          uni.showToast({
            title:'取消收藏失败',
            icon:'none'
          })
        })
      },
			//获取收藏接口数据
			postData(){
				this.$axios.post("/collection/collect",{
					goodsId: 1
				}).then(res=>{
					console.log(res,"收藏");
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:"none"
					})
				})
			},

		}
	}
</script>

<style>
	/*轮播图*/
	.swipers{
		height: 250px;
	}
	.swiper-img{
		width: 100%;
		height: 500rpx;
	}
	/*详情*/
	.message{
		width: 100%;
		height: 99px;
		background-color: #E2EDF7;
		padding-left: 12px;
		display: flex;
		flex-direction: column;
		border-radius: 10px 10px 0px 0px;
	}
	.product-message{
		font-size: 14px;
		text-align: left;
		font-weight: 700;
	}
	.time{
		color: #888889;
		font-size: 12px;
		margin-top: 20px;
	}
	.detals-img{
		width: 100%;
	}
	/*商品介绍*/
	.product-introduce{
		padding: 0 20px;
		margin-top: 16px;
		height: 255px;
	}
	.goods-introduce{
		padding: 0 20px;
		margin-top: 16px;
	}
	.introduce{
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-weight: bold;
	}
	/*商品推荐*/
	.shop-tj{
		margin-top: 15px;
		padding: 0 22px 0 20px;
		height: 326px;
		position: relative;
		overflow: auto;
	}
	.goods{
		display: flex;
		width: 100%;
		height: 120px;
		background: #fff;
		margin: 7px 0;
	}
	uni-image{
		width: 130px;
		height: 85px;
	}
	text{
		font-size: 14px;
		color: #101010;

	}
	.content{
		margin-top: 10px;
		margin-right: 46px;

	}
	.content-message{
		margin-top: 43px;
	}
	.ttime{
		color: #888889;
		font-size: 12px;
		margin-top: 20px;
		margin-left: 51px;

	}
	.price{
		color: #ff0000;
		font-size: 18px;
		font-weight: 700;
	}
	/*底部导航栏*/
	.goods-foot{
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
	}
	.shop-btn{
		float: left;
		left: 33%;
		top: 1px;
		width: 89px;
		height: 36px;
		border-radius: 4px;
		background-color: rgba(237, 80, 33, 1);
		color: rgba(252, 252, 252, 1);
		font-size: 14px;
		text-align: center;

	}
	/*收藏小红心*/
	.fav{
		display: flex;
		flex-direction: column;
		position: relative;
		left: 63%;
	}
	.fav-txt{
		color: #888889;
		font-size: 12px;
		text-align: left;
	}
</style>
